<template>
    <div class="container">
       <div class="inp-box">
         <div class="inp">
             <input type="text" placeholder="请输入6位兑换码" v-model="number" @keyup.enter="goSearch">
         </div>
         <div class="btn" @click="goSearch">兑换</div>
       </div>
       <div class="stamp stamp02" v-for="(cart,index) in cartlist" :key="index">
            <div class="par"><p>超值优惠卷</p><sub class="sign">￥</sub><span>{{cart.numberValue}}</span><sub>优惠券</sub><p>{{cart.name}}</p></div>
            <div class="copy">副券<p>{{cart.startDate.substr(0,10)}}<br>{{cart.createDateName.substr(0,10)}}</p></div>
            <i></i>
       </div>

    </div>
</template>
<script>
export default {
     data () {
	    return {
            cartlist:[],
            number:'',
        }
     },
     mounted(){
       this.getCartlist()
     },
     methods:{
         getCartlist(){
          var self=this
          this.$axios.post('/device/couponUser/getMyInAll',{userId:this.$route.query.userId}).then((res) => {
             self.cartlist=res.data.data
             console.log(res)
          })
       },
       goSearch(){
         var self=this
          this.$axios.post('/device/couponUser/saveCode',{userId:this.$route.query.userId,couponNumber:self.number}).then((res) => {
            if(res.data.code==1000){
               self.getCartlist()
               this.$vux.toast.text('兑换成功')
            }else{
                console.log(res)
                this.$vux.toast.text('兑换失败,'+res.data.message)
            }
          })
       }
     }
}
</script>

<style scoped lang="less">

   .container{
       height:100%;
       min-height: 100%;
   }
.stamp {
    width: 700px;
    height: 200px;
    padding:10px;
    position: relative;
    overflow: hidden;
    margin:10px auto;
       }
.stamp:before {content: '';position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;}
.stamp:after {content: '';position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;}
.stamp i{position: absolute;
  left: 20%;top: 45px;height: 250px;width: 700px;
  background-color: rgba(255,255,255,.15);transform: rotate(-30deg);}
.stamp .par{
    float: left;
    padding: 26px 15px;
    width: 348px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;}
.stamp .par p{
    color:#fff;
     font-size: 26px;
    }
.stamp .par span{font-size: 56px;color:#fff;margin-right: 5px;}
.stamp .par .sign{font-size: 34px;}
.stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);}
.stamp .copy{display: inline-block;padding:21px 14px;width:180px;vertical-align: text-bottom;font-size: 38px;color:rgb(255,255,255);}
.stamp .copy p{font-size: 26px;margin-top: 15px;}
.stamp02{background: #D24161;background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp02:before{background-color:#D24161;}
.inp-box{
    height:70px;
    width:700px;
    margin:20px auto;
    font-size: 28px;
    display: flex;
    align-items: center;
    .inp{
        flex:1;
        height:70px;
        background: #f5f5f5;
        margin-right: 20px;
        border-radius: 10px;
        input{
           background: #f5f5f5; 
           display: block;
           padding:0 20px;
           width:90%;
           height: 100%;
        }
    }
    .btn{
        width:120px;
        background: #f5f5f5;
       line-height: 70px;
       border-radius: 10px;
    }
}
</style>
